<template>
	<el-dialog title="导入数据" class="peak-dialog" v-model="showModal" :width="800" :close-on-click-modal="false">
		<el-form class="params-form" ref="paramsFormRef" :inline="true" label-position="left" label-width="100px">
			<el-steps :active="current" simple>
				<el-step title="文件上传" />
				<el-step title="结果预览" />
			</el-steps>
			<el-row :gutter="16" justify="start" v-if="current == 1">
				<el-col :span="24">
					<div class="upload-excel" @click="handleTplDownLoad()">
						<div class="upload-excel-box">
							<i style="color: #0052cc; font-size: 45px" class="alifont ali-down-file" />
							<div class="upload-block">
								<p class="title">模板下载</p>
								<p class="cont">请按照数据模板的格式导入数据，模板中的表头，表头行不能修改</p>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="24">
					<div class="upload-excel">
						<el-upload class="upload-peak" :action="uploadUrl" :data="paramsForm" :on-remove="handleRemove" :on-success="handleSuccess" :on-error="handleError" :multiple="false" :limit="1" :headers="{ Authorization: getCurToken() }" :file-list="fileList">
							<div class="upload-excel-box">
								<i style="color: #0052cc; font-size: 45px" class="alifont ali-upload-file" />
								<div class="upload-block">
									<p class="title">文件导入</p>
									<p class="cont">文件后缀名必须为xls 或xlsx，文件大小不得大于20M</p>
								</div>
							</div>
						</el-upload>
					</div>
				</el-col>
			</el-row>
			<template v-if="current == 2">
				<div class="upload-excel" style="padding: 0px 10px">
					<div class="data-item" v-for="(item, index) in dataList" :key="index">
						<span v-html="item" />
					</div>
				</div>
			</template>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取 消</el-button>
				<el-button type="primary" @click="handleSure" v-throttle>确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script name="ImportFileModal" setup>
import global from '@/utils/global'
import { getToken } from '@/utils/storage'
import fileDownload from 'js-file-download'

/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-09-05 15:12:11
 */
const emit = defineEmits(['peak-modal-ok'])
const props = defineProps({
	url: {
		type: String,
	},
	tplUrl: {
		type: String,
	},
	isReq: {
		type: Boolean,
		default: false,
	},
})
const state = reactive({
	showModal: false,
	paramsFormRef: null,
	paramsForm: {},
	fileList: [],
	uploadUrl: import.meta.env.VITE_API_URL + props.url,
	current: 1,
	dataList: [],
})

const { showModal, paramsFormRef, paramsForm, fileList, uploadUrl, current, dataList } = toRefs(state)

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-09-05 15:12:18
 */
const handleRemove = (file, fileList) => {
	state.fileList = fileList
}
const handleSuccess = response => {
	if (response.code == 200) {
		state.dataList = response.data.split('<br/>')
		state.current = 2
	} else {
		global.$baseMessage(response.msg, 'error')
	}
}
const handleError = err => {
	console.log(err)
}
const getCurToken = () => {
	const tokenVal = getToken()
	if (tokenVal) {
		return `sop ${tokenVal}`
	} else {
		return ''
	}
}
const handleSure = () => {
	emit('peak-modal-ok', 1)
	state.showModal = false
}
const handleCancel = () => {
	state.showModal = false
}
const handleTplDownLoad = () => {
	if (props.isReq) {
		global.$fetchDownFile(props.tplUrl, {}).then(data => {
			fileDownload(data, '导入模版.xlsx')
		})
	} else {
		window.location.href = props.tplUrl
	}
}
const handleShowModal = params => {
	state.title = '导入数据'
	state.showModal = true
	state.paramsForm = { ...params }
	state.fileList = []
	state.current = 1
}

defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped>
.el-dialog__body {
	padding-top: 10px !important;
}
.data-item {
	padding-top: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e8eaec;
	&.data-item {
		border-bottom: 0px;
	}
}
.upload-excel {
	margin-top: 20px;
	border: 1px dashed #dcdee2;
	.upload-excel-box {
		padding: 16px;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		cursor: pointer;
		.upload-block {
			margin-left: 16px;
			.title {
				font-size: 18px;
				color: #0052cc;
				text-align: left;
				margin-bottom: 4px;
			}
			.cont {
				font-size: 12px;
			}
			.t1 {
				font-size: 16px;
			}
			.t2 {
				font-size: 16px;
			}
		}
	}
}
</style>
